<template>
    <div :class="['upload-container', disabled && !imageUrl ? 'hidden' : '']">
        <div :class="['upload-box', imageUrl && !disabled ? 'active' : '']" v-loading="loading">
            <upload
                :fileType="fileType"
                :dirType="dirType"
                :sizeRatio="sizeRatio"
                :data="data"
                :src="imageUrl"
                v-if="!disabled"
                @change="onUploadImage"
            >
            </upload>

            <div class="show" v-else-if="disabled && imageUrl">
                <!-- 查看状态 不可编辑 -->
                <el-image
                    v-if="fileType === 'image'"
                    class="size"
                    :src="imageUrl"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[imageUrl]"
                    :initial-index="4"
                    :preview-teleported="true"
                    fit="contain"
                />
                <video :src="imageUrl" v-else @click="onPreview" class="avatar" style="cursor: pointer"></video>
            </div>
            <!-- 操作 已经上传了图片且在不能编辑的情况下和当前是图片-->
            <template v-if="fileType === 'image'">
                <div class="upload-operation upload-delete" @click="onDelete" v-if="imageUrl && !disabled">
                    <el-icon :size="24" color="#333">
                        <Delete />
                    </el-icon>
                </div>
                <div
                    class="upload-operation upload-preview"
                    @click="onPreview"
                    v-if="imageUrl && !disabled && fileType === 'image'"
                >
                    <el-icon :size="24" color="#333">
                        <View />
                    </el-icon>
                </div>
            </template>

            <!-- if video , that open dialog -->
            <div class="upload-video" @click="onOpenVideoDialog" v-if="fileType === 'video'">
                <img v-if="imageUrl" :src="imageUrl" alt="" srcset="" />
            </div>
        </div>
        <el-input
            v-model="tagInput"
            class="tag"
            style="width: 178px"
            :placeholder="placeholder"
            @blur="handleInputConfirm"
            :disabled="disabled"
            clearable
            v-if="visibleTag"
        ></el-input>

        <!-- 预览视频 -->
        <BasicDialogVue
            :data="previewDialog"
            v-if="previewDialog.type == 'video'"
            @close="
                () => {
                    previewDialog.visible = false
                    previewDialog.src = ''
                }
            "
        >
            <template #content>
                <div class="video-container">
                    <video :src="previewDialog.src" autoplay controls></video>
                </div>
            </template>
        </BasicDialogVue>

        <el-image-viewer
            :url-list="[imageUrl]"
            v-if="previewDialog.visible && previewDialog.type == 'image'"
            @close="
                () => {
                    previewDialog.visible = false
                    previewDialog.src = ''
                }
            "
        ></el-image-viewer>

        <!-- 视频操作 -->
        <UploadVideoVue
            :visible="uploadVideoDilaog.visible"
            :fileType="fileType"
            :dirType="dirType"
            :sizeRatio="sizeRatio"
            :value="data"
            @close="
                () => {
                    uploadVideoDilaog.visible = false
                    uploadVideoDilaog.src = ''
                }
            "
            @change="onUploadVideoDialog"
        />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import { ElInput } from 'element-plus'
import { fileUrl } from '@/apis/upload/index'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import UploadVideoVue from './uploadVideo.vue'
import upload from './upload.vue'

const props = defineProps([
    'data',
    'pass',
    'visibleTag',
    'fileType',
    'dirType',
    'index',
    'disabled',
    'placeholder',
    'sizeRatio',
    'imageCount',
    'videoCount',
    'tag'
])
const emits = defineEmits(['change', 'delete', 'inputTag'])
const imageUrl = ref('')
const tagInput = ref('')
const imageUrlId = ref('')
const loading = ref(false)
const previewDialog = reactive({
    visible: false,
    title: '视频预览',
    width: '800px',
    type: 'video',
    src: ''
})
const uploadVideoDilaog = reactive({
    visible: false,
    title: '视频上传',
    width: '800px',
    type: 'video',
    src: ''
})

const imageRes: any[] = []
const videoRes: any[] = []

watchEffect(() => {
    console.log('props.data', props.data)
    if (props.data) {
        if (!props.data.list.length) {
            imageUrl.value = ''
            tagInput.value = ''
        } else if (props.data.list.length && imageUrl.value === '') {
            imageRes.length = 0
            videoRes.length = 0
            if (props.data.type === 'image' && props.data.list.length) {
                fileUrl(props.data.list[0].key).then(res => {
                    imageUrl.value = res.data.result
                })
                tagInput.value = props.data.tag
                imageRes.push(...props.data.list)
            } else {
                props.data.list.forEach((item: any) => {
                    if (item.type == 'image') {
                        fileUrl(item.key).then(res => {
                            imageUrl.value = res.data.result
                        })
                        tagInput.value = item.name
                    }
                })
                videoRes.push(...props.data.list)
            }
        }
    }
    if (imageUrl.value && !props.data) {
        imageUrl.value = ''
        tagInput.value = ''
    }
})

const handleInputConfirm = () => {
    //统一改名称
    videoRes.forEach((item: any) => {
        item.name = tagInput.value
    })
    imageRes.forEach((item: any) => {
        item.name = tagInput.value
    })
    emits('change', {
        type: props.fileType,
        index: props.index,
        tag: tagInput.value,
        list: props.fileType === 'video' ? videoRes : imageRes
    })
}
//点击删除上传内容
const onDelete = () => {
    // imageUrlId.value = ''
    // imageUrl.value = ''
    // tagInput.value = ''
    emits('delete', { index: props.index })
}

const onPreview = () => {
    previewDialog.type = props.fileType
    previewDialog.visible = true
    previewDialog.src = imageUrl.value
}

//点击显示上传视频弹窗
const onOpenVideoDialog = () => {
    uploadVideoDilaog.visible = true
}

//监听上传的图片
const onUploadImage = (res: any) => {
    imageUrl.value = res.url
    tagInput.value = res.name
    imageRes.push(res)
    emits('change', {
        type: props.fileType,
        index: props.index,
        tag: tagInput.value,
        list: [res]
    })
}

//监听上传视频及视频封面弹窗
const onUploadVideoDialog = (res: any[]) => {
    res.forEach((item: any) => {
        if (item.type === 'image') {
            imageUrl.value = item.url
            tagInput.value = item.name
        }
    })
    uploadVideoDilaog.visible = false
    videoRes.push(...res)
    emits('change', {
        type: props.fileType,
        index: props.index,
        tag: tagInput.value,
        list: [...res]
    })
}
</script>

<style scoped>
.upload-container {
    margin: 8px 16px 8px 0;
}
.upload-container.hidden {
    display: none;
}
.upload-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.upload-video {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}
.avatar-uploader {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.avatar-uploader > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fileType {
}
.fileType p {
    width: 100%;
    font-size: 12px;
    line-height: 24px;
    color: #999;
}
.active:hover .upload-operation {
    opacity: 1;
}
.upload-box img,
.upload-box video {
    display: block;
    width: 100%;
    height: 100%;
}
.upload-operation {
    position: absolute;

    z-index: 11;
    cursor: pointer;
    opacity: 0;
}
.upload-delete {
    top: 10px;
    right: 10px;
}
.upload-preview {
    top: 10px;
    left: 10px;
}

.avatar {
    display: block;
}
.show {
    display: block;
    position: absolute;
    z-index: 12;
    border: 1px dashed var(--el-border-color);
    box-sizing: border-box;
}

.tag {
    margin-top: 8px;
    width: 100%;
}

.el-icon.avatar-uploader-icon {
    font-size: 36px;
    color: #999;
    text-align: center;
}

.video-container {
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
}
.video-container video {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
}
</style>
